<template>
  <div>
    <div class="divHeader">
      <i class="el-icon-shopping-cart-2" style="color: #ff6700"></i>
      <p>我的购物车</p>
      <span class="two"
        >温馨提示: 产品是否购买成功，以最终下单为准哦，请尽快结算</span
      >
    </div>
    <div>
      <div v-if="this.list.length == 0">
        <img src="../../assets/imgs/cart-empty.png" class="img" />
      </div>
      <div class="divMain" v-else>
        <ul>
          <li>
            <div>
              <span><input type="checkbox" v-model="isAllCheck" />全选</span>
              <p>商品名称</p>
              <p>单价</p>
              <p>数量</p>
              <p>小计</p>
              <p>操作</p>
            </div>
            <div>
              <span v-for="(item, index) in list" :key="index" class="div">
                <input type="checkbox" v-model="item.check"  />
                <img
                  :src="'http://101.132.181.9:3000/' + item.productImg"
                  alt=""
                />
                <p>{{ item.productName }}</p>
                <p>{{ item.price }} 元</p>
                <div>
                  <van-stepper
                    :value="item.num"
                    async-change
                    @change="onChange"
                  />
                </div>

                <p>{{ item.num * item.price }} 元</p>
                <p><i class="el-icon-error"
                 @click="del(item.productID)"
                ></i></p>
              </span>
            </div>
          </li>
        </ul>
      </div>

      <div class="footer">
        <div class="footer_item1">
          <p>
            继续购物 &emsp; | &emsp; 共有
            <span>{{ list.length }}</span> 件商品，已选择
            <span> {{ shopAll.checkNum }}</span> 件
          </p>
          <p>合计 : <span>{{ shopAll.checkPriceNum }}</span> 元</p>
        </div>
        <div class="footer_item2">
          <button :disabled="shopAll.checkNum > 0 ? false:true" @click="gotoOrder">去结算</button>
          <!-- <button disabled>去结算</button> -->
         
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getShop ,delShop} from "../../api/api";
export default {
  data() {
    return {
      isEdit: true,
      num: 1,
      timer: null,
      list: [],
      // userId: this.$store.getters.getUser.user_id,
      userId: JSON.parse(localStorage.getItem("user") || []),
    };
  },
  computed: {
    isAllCheck: {
      set(v) {
         return this.list.forEach(item => {
          return item.check == v
        })
      },
      get() {
         return this.list.every(item=>{
            return item.check==true
        })
      },
    },
        //价格
    shopAll() {
      var checkNum = 0;
      var checkPriceNum = 0;
      this.list.forEach((item) => {
        if (item.check == true) {
          checkNum += item.num;
          checkPriceNum += item.num * item.price;
          this.isEdit=false
        }else{
          this.isEdit=true
          return 
        }
      });
      return { checkNum, checkPriceNum };
    },
  },
  created() {
    this.getList();
  },
  methods: {
    // 结算
    gotoOrder(){
              let obj=this.list.filter((item)=>{
            return item.check===true
        })
        console.log("obj",obj);
        let oa=JSON.stringify(obj)
        console.log(oa,"oa");
        this.$store.commit("order",obj)
      this.$router.push("/ConfirmOrder?cid="+oa)
    },
    // 删除
    async del(v){
            let res = await delShop({ product_id: v, user_id: this.userId.user_id});
      console.log(res);
      if (res.code == "001") {
        this.getList();
        this.$notify.success({
          title: "删除成功",
          message: "删除购物车商品成功",
          type: "success",
        });
      }
    },
    async getList() {
     
      console.log(this.userId.user_id , "id");
    
      let res = await getShop({ user_id: this.userId.user_id});
      console.log(res, "resCart");
      if (res.code == "001") {
        if (res.shoppingCartData == "") {
          this.$message.warning("该购物车为空，请先添加商品");
        } else {
          this.list = res.shoppingCartData;
           this.$store.commit('shops',res.shoppingCartData)
        }
      }
    },
    // 计步器
    onChange(value) {
      // 注意此时修改 value 后会再次触发 change 事件
      this.num = value;
      //   clearTimeout(this.timer);
      //   this.timer = setTimeout(() => {
      //   }, 500);
    },
  },
};
</script>

<style scoped>
.img {
  width: 50%;
  margin: auto;
}
.divHeader {
  width: 100%;
  height: 65px;
  background-color: #fff;
  padding-left: 95px;
  border-bottom: 2px solid #ff6700;
  line-height: 65px;
  font-size: 35px;
  display: flex;
  align-items: center;
}
.two {
  font-size: 10px;
  color: rgb(106, 106, 106);
}
.divMain {
  width: 90%;
  margin: 15px auto;
}

.divMain ul {
  width: 100%;
}
.divMain ul li {
  width: 100%;
}
li div:nth-child(1) {
  width: 100%;
  height: 80px;
  background-color: #fff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border: 1px solid rgb(230, 230, 230);
}
li div:nth-child(2) {
  width: 100%;
}
.div {
  width: 100%;
  height: 135px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border: 1px solid #ddd;
  background-color: #fff;
  color: black;
}
li div:nth-child(2) img {
  width: 80px;
  height: 80px;
}

.footer {
  width: 90%;
  height: 50px;
  margin: auto;
  display: flex;
  justify-content: space-around;
  margin-top: 15px;
}
.footer .footer_item1 {
  width: 80%;
  height: 100%;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
}
.footer .footer_item2 {
  width: 20%;
  height: 100%;
}
 .footer_item2  button {
  width: 100%;
  height: 100%;
  border: none;
  background-color: #ff6700;
  color: #fff;
}
.footer_item1 p span {
  color: #ff6700;
}
</style>